import Image from 'next/image';
import Link from 'next/link';
import { getSortedPostsData } from '@/lib/posts';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Rss, User, ArrowRight } from 'lucide-react';

export default function Home() {
  const posts = getSortedPostsData();

  return (
    <div className="bg-background text-foreground min-h-screen">
      <main className="container mx-auto px-6 lg:px-8 py-16 lg:py-24">
        {/* Hero Section */}
        <section id="home" className="text-center mb-32">
          <div className="max-w-4xl mx-auto">
            <h1 className="text-5xl lg:text-7xl font-bold tracking-tight mb-8 bg-clip-text text-transparent bg-gradient-to-r from-primary via-purple-600 to-pink-600 leading-tight">
              AI 奇点已经来临
            </h1>
            <p className="text-xl lg:text-2xl font-light text-muted-foreground mb-16 leading-relaxed">
              玩转AI，做时代的抢跑者
            </p>
            <div className="flex justify-center">
              <div className="group cursor-pointer">
                <Image
                  src="/rags_qr.png"
                  alt="RAG讨论 二维码"
                  width={180}
                  height={180}
                  className="rounded-2xl shadow-2xl transition-all duration-500 hover:scale-110 hover:shadow-3xl"
                />
                <p className="text-sm font-medium text-muted-foreground mt-4 transition-colors group-hover:text-primary">
                  RAG所有策略
                </p>
              </div>
            </div>
          </div>
        </section>

        <Separator className="my-24" />

        {/* Blog Section */}
        <section id="blog" className="mb-32">
          <div className="max-w-5xl mx-auto">
            <h2 className="text-4xl lg:text-5xl font-bold text-center mb-16 flex items-center justify-center gap-4">
              <Rss className="w-10 h-10 text-primary" />
              最新洞见
            </h2>
            <div className="grid gap-8">
              {posts.map(({ id, date, title, tags }) => (
                <Card key={id} className="group hover:shadow-xl transition-all duration-300 border-0 bg-card/50 backdrop-blur-sm">
                  <CardHeader className="pb-4">
                    <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                      <Link href={`/posts/${id}`} className="block">
                        <CardTitle className="text-2xl lg:text-3xl font-semibold group-hover:text-primary transition-colors cursor-pointer flex items-center gap-2">
                          {title}
                          <ArrowRight className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                        </CardTitle>
                      </Link>
                      <p className="text-sm text-muted-foreground whitespace-nowrap font-medium">
                        {new Date(date).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })}
                      </p>
                    </div>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <div className="flex flex-wrap gap-3">
                      {tags.map((tag) => (
                        <Badge key={tag} variant="secondary" className="text-xs font-medium px-3 py-1">
                          {tag}
                        </Badge>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <Separator className="my-24" />

        {/* About Section */}
        <section id="about" className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl lg:text-5xl font-bold mb-12 flex items-center justify-center gap-4">
            <User className="w-10 h-10 text-primary" />
            关于我
          </h2>
          <div className="flex justify-center mb-8">
            <Avatar className="w-32 h-32 ring-4 ring-primary/20">
              <AvatarImage src="/touxiang.png" alt="雷哥" />
              <AvatarFallback className="text-2xl font-bold">雷</AvatarFallback>
            </Avatar>
          </div>
          <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
            你好，我是雷哥，一名关注 AI 技术的慢思考者。
            <br />
            欢迎来到我的个人主页，让我们一起探索人工智能的无限可能。
          </p>
        </section>
      </main>

      <footer className="text-center py-12 border-t border-border/50">
        <p className="text-sm text-muted-foreground">
          &copy; {new Date().getFullYear()} 雷哥. All Rights Reserved.
        </p>
      </footer>
    </div>
  );
}
